<template>
  <h1>隐藏显示指令</h1>
<!--  v-if='布尔值 true 元素显示 false元素消失 '-->
  <p v-if="true">张三</p>
<!--  不渲染该元素-->
  <p v-if="false">李四</p>
  <hr>
<!--  v-show='布尔值' true元素显示,false元素不显示-->
  <p v-show="true">小红</p>
<!--  渲染,但是不显示该元素,display:none-->
  <p v-show="false">小绿</p>
  <hr>
  <p v-if="isShow">太阳</p>
<!--  v-else 找距离自己最近的v-if 进行取反 -->
  <p v-else>月亮</p>
  <button @click="isShow=!isShow">切换</button>


</template>

<script setup>
  import {ref} from "vue";
  const isShow=ref(true);
</script>


<style scoped>

</style>